import React from 'react'
import { Button, Checkbox, Form, Input,message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from '@/store'
import { loginApi } from '@/api/modules/login'
import { setToken } from '@/store/modules/global'
import { setTabsList } from '@/store/modules/tabs'
import { HOME_URL } from '@/config/config'
import md5 from 'js-md5'

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const [loading, setLoading] = React.useState(false)

  const onFinish = async (values) => {
    setLoading(true)
    values.password = md5(values.password)
    const { data } = await loginApi(values)
    dispatch(setToken(data.access_token))
    dispatch(setTabsList([]))
    message.success('登录成功！')
    navigate(HOME_URL)
  }
  const onFinishFailed = (errorInfo) => {
  }
  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入您给用户名!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入您的密码!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item label={null}>
        <Button type="primary" htmlType="submit" loading={loading}>
          提交
        </Button>
      </Form.Item>
    </Form>
  )
}

export default Login
